<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
	
		function removeTrTag(aNode){
		
			// jQuery 对象调用 jQuery 提供的方法的返回值是一个 jQuery 对象
			// jQuery部分方法的连缀无效
			var $trNode = $(aNode).parent().parent();
			var firstTdNodeText = $trNode.children("td").eq(0).text();
			//confirm()方法会弹出一个对话,确认是否,点击确定返回true,点击取消返回false			
			var confirmRemove = confirm("确认删除"+ firstTdNodeText +"的信息吗?");
			
			if(confirmRemove == true){
				$trNode.remove();
			}
			return false;
		}
		
		$("a").click(function(){
			removeTrTag(this);
			return false;
		});
		
		$("#addEmpButton").click(function(){
			var netName = $.trim($(":text[name='name']").val());
			var netEmail = $.trim($(":text[name='email']").val());
			var netSalary = $.trim($(":text[name='salary']").val());
			
			//创建<tr></tr>节点
			$("<tr></tr>").append("<td>"+ netName +"</td>")
						 .append("<td>"+ netEmail +"</td>")
						 .append("<td>"+ netSalary +"</td>")
						 .append("<td><a href='#'>Delete</a></td>")
						 .appendTo("#employeetable tbody")
						 //find(expr) 找出正在处理的元素的后代元素
						 .find($("a")).click(function(){
						 	return removeTrTag(this);
						});
						
			$.trim($(":text[name='name']").val(""));			
			$.trim($(":text[name='email']").val(""));
			$.trim($(":text[name='salary']").val(""));
		});
	});
	
</script>
</head>
<body>

	<center>
		<br> <br> 添加新员工 <br> <br> name: <input type="text"
			name="name" id="name" />&nbsp;&nbsp; email: <input type="text"
			name="email" id="email" />&nbsp;&nbsp; salary: <input type="text"
			name="salary" id="salary" /> <br> <br>
		<button id="addEmpButton" value="abc">Submit</button>
		<br> <br>
		<hr>
		<br> <br>
		<table id="employeetable" border="1" cellpadding="5" cellspacing=0>
			<tbody>
				<tr>
					<th>Name</th>
					<th>Email</th>
					<th>Salary</th>
					<th>&nbsp;</th>
				</tr>
				<tr>
					<td>Tom</td>
					<td>tom@tom.com</td>
					<td>5000</td>
					<td><a href="#">Delete</a></td>
				</tr>
				<tr>
					<td>Jerry</td>
					<td>jerry@sohu.com</td>
					<td>8000</td>
					<td><a href="#">Delete</a></td>
				</tr>
				<tr>
					<td>Bob</td>
					<td>bob@tom.com</td>
					<td>10000</td>
					<td><a href="#">Delete</a></td>
				</tr>
			</tbody>
		</table>
	</center>

</body>
</html>